<!--<template lang="pug">-->
<!--    form.form-group(@submit.prevent="onSub")-->
<!--        //input.btn.btn-white.btn-marketing.rounded-pill.my-2.lift.lift-sm-->
<!--        input.d-lg-none.d-xl-block#inputSearch.form-control.form-control-solid.rounded-pill(type='text',:placeholder='placeholder',autocomplete="off")-->
<!--        //input.d-none.d-lg-block.d-xl-none#demo-2(type='search' placeholder='Search')-->

<!--</template>-->
<template>
    <div class="nav-item dropdown no-caret">
        <div class="d-lg-none d-xl-block">
            <form class="form-group" @submit.prevent="onSub">
                <input
                    v-model="keywords"
                    id="inputSearch"
                    class="form-control form-control-solid rounded-pill"
                    type="text"
                    :placeholder="placeholder"
                    autocomplete="off"
                />
            </form>
        </div>

        <!--仅在lg下出现-->
        <div class="d-none d-lg-block d-xl-none">
            <a
                class="btn btn-icon btn-transparent-light dropdown-toggle p-0"
                id="searchDropdown"
                href="#"
                role="button"
                data-toggle="dropdown"
            >
                <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="3"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    class="feather feather-search"
                >
                    <circle cx="11" cy="11" r="9"></circle>
                    <line x1="23" y1="23" x2="18.65" y2="18.65"></line>
                </svg>
            </a>
            <!-- Dropdown - Search-->
            <div
                class="dropdown-menu dropdown-menu-right p-3 shadow animated--fade-in-up"
                aria-labelledby="searchDropdown"
            >
                <form class="form-inline mr-auto w-100" @submit.prevent="onSub">
                    <div
                        class="input-group input-group-joined input-group-solid"
                        :style="{ boxShadow: focusShadow }"
                    >
                        <input
                            v-model="keywords"
                            class="form-control"
                            type="text"
                            :placeholder="placeholder"
                            @focus="
                                focusShadow = '0 0 0 0.17rem rgb(196,214,251)'
                            "
                            @blur="focusShadow = 'none'"
                        />
                        <div class="input-group-append">
                            <div class="input-group-text">
                                <svg
                                    xmlns="http://www.w3.org/2000/svg"
                                    width="24"
                                    height="24"
                                    viewBox="0 0 24 24"
                                    fill="none"
                                    stroke="currentColor"
                                    stroke-width="2"
                                    stroke-linecap="round"
                                    stroke-linejoin="round"
                                    class="feather feather-search"
                                >
                                    <circle cx="11" cy="11" r="8"></circle>
                                    <line
                                        x1="21"
                                        y1="21"
                                        x2="16.65"
                                        y2="16.65"
                                    ></line>
                                </svg>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'search-bar',
    props: {
        placeholder: {
            type: String,
            default: '请输入关键词..',
        },
    },
    data() {
        return {
            keywords: '',
            focusShadow: 'none',
        };
    },
    methods: {
        onSub() {
            this.$router
                .push({
                    name: 'Search',
                    query: { keywords: this.keywords, page: 1 },
                })
                .catch(err => {
                    // console.log('Router Error:');
                    // console.log(err);
                    err;
                });
        },
    },
    deactivated() {
        this.keywords = '';
    },
};
</script>

<style scoped lang="scss">
.form-group {
    margin-bottom: 0 !important;
}

.form-control-solid {
    border: none;
    &:focus {
        box-shadow: 0 0 0 0.15rem $gray-400;
    }
}

#inputSearch {
    height: 2.2rem !important;
    font-size: 0.95rem;
    //max-width: 10.8rem !important;
    background: $gray-300 url('/assets/img/icon/search-icon.png') no-repeat 10px
        center;
    padding-left: 36px;
    &:focus {
        background-color: $input-solid-bg;
    }
}
</style>
